// components/qrCode/qrCode.js
var _this
var app = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // maskHidden: {
    //   type: Boolean,//类型
    //   value: true,
    //   observer:function(newVal,oldVal,change){
    //     if(newVal){
    //       this.createNewImg()
    //     }
    //   }
    // },
    isQr:{
      type:Boolean,
      value:false,
      observer:function(newVal,oldVal,change){
        if(newVal){
          console.log(newVal)
          this.createNewImg()
        }
      }
    },
    height:{
      type:Number,
      value:375
    },
    width:{
      type:Number,
      value:667
    },
    /**
     * type = 1 ，正方形
     * type = 2 ，图片
     * type = 3 ，文字
     * type = 4 ，圆形图片
     * type = 5 . 线
     */
    list:{
      type:Object,
      value:[],
      observer:function(newVal,oldVal,change){
        // if(newVal){
        //   this.createNewImg()
        // }
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    imagePath: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
    createNewImg: function () {
      let _this = this
      let list = _this.properties.list;
      wx.showLoading({
        title: '海报生成中...',
      })
      //创建画布
      var context = wx.createCanvasContext('mycanvas',_this);
      context.save()
      context.beginPath()
      // 遍历数据
      let price_new = 0,price_new_left = 0,price_old = 0
      for(let i = 0;i<list.length;i++){
        if(list[i].type == 1){
          context.fillStyle = list[i].fillStyle
          context.fillRect(list[i].left,list[i].top,list[i].width,list[i].height)
        }else if(list[i].type == 2){
          context.drawImage(list[i].path, list[i].left, list[i].top, list[i].width, list[i].height)
        }else if(list[i].type == 3){
          context.setFillStyle(list[i].setFillStyle)
          context.font = list[i].font + "px Arial";
          context.fillText(list[i].fillText, (price_new != 0 && list[i].price_old) ? parseInt(price_new + price_new_left + 10) : list[i].left, list[i].top);
          if(list[i].price_new){
            price_new = context.measureText(list[i].fillText).width
            price_new_left = list[i].left
            console.log(parseInt(price_new + price_new_left + 30))
          }
          if(list[i].price_old){
            price_old = context.measureText(list[i].fillText).width
          }
        }else if(list[i].type == 4){
          context.save()
          context.beginPath()
          context.arc(list[i].left+list[i].arcR, list[i].top+list[i].arcR, list[i].arcR, list[i].arcStart,list[i].arcEnd)
          // context.setStrokeStyle('#ffffff')
          // context.stroke()
          context.clip()
          context.drawImage(list[i].path, list[i].left, list[i].top, 2*list[i].arcR, 2*list[i].arcR)
          context.restore()
        }else if(list[i].type == 5){
          context.moveTo(parseInt(price_new + price_new_left + 10),list[i].top);
          context.lineTo(parseInt(price_new + price_new_left + price_old + 10), list[i].top1);
          context.setStrokeStyle(list[i].style);
          context.stroke();
          context.save();
        }
      }
      // 开始绘画
      context.draw();

      //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
      setTimeout(function () {
        wx.canvasToTempFilePath({
          canvasId: 'mycanvas',
          success: function (res) {
            wx.hideLoading()
            var tempFilePath = res.tempFilePath;
            _this.setData({
              imagePath: tempFilePath,
            });
            //保存在全局中--以供其他页面调用
            app.globalData.shareImage = tempFilePath;
          },
          fail: function (res) {
            console.log(res);
          }
        }, _this);
      }, 2000);
    },
    
    //点击保存到相册
    baocun: function () {
      let _this = this
      console.log(_this.data.imagePath)
      wx.saveImageToPhotosAlbum({
        filePath: _this.data.imagePath,
        success(res) {
          console.log(res)
          wx.showModal({
            content: '图片已保存到相册~',
            showCancel: false,
            confirmText: '好的',
            confirmColor: '#333',
            success: function (res) {
              if (res.confirm) {
                
              }
            }, fail: function (res) {
              wx.showToast({
                title: '取消授权',
                icon: 'none',
                duration: 1500,
              });
            }
          })
        },
        fail(res) {
          console.log(res)
          if (res.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
            wx.openSetting({
              success(settingdata) {
                console.log(settingdata)
                if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                  console.log("获取权限成功，再次点击图片保存到相册")
                } else {
                  console.log("获取权限失败")
                }
              }
            })
          }
        }
      })
    },
  }
})
